<template>
																			<!-- 这里用3元运算符写 -->
  <el-col :span="12" class="sidebar" :class="sidebar.opened ? 'sidebar-w1' : 'sidebar-w'">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
			:collapse="sidebar.opened"
      active-text-color="#ffd04b"
    >
		<router-link to="/">
      <el-menu-item index="/home">
        <i class="icon iconfont icon-home"></i>
        <span slot="title"> 首页</span>
      </el-menu-item>
		</router-link>
		<router-link to="/super">
      <el-menu-item index="/super">
        <i class="icon iconfont icon-home"></i>
        <span slot="title"> 管理用户信息</span>
      </el-menu-item>
		</router-link>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">商品</span>
        </template>
        <el-menu-item-group>
          <router-link to="/pms/product">
            <el-menu-item index="/pms/product"><i class="icon iconfont icon-liebiao1"></i> 商品列表 </el-menu-item>
          </router-link>
          <router-link to="/pms/addproduct">
            <el-menu-item index="3-2"><i class="icon iconfont icon-tianjia"></i> 添加商品 </el-menu-item>
          </router-link>
          <router-link to="/pms/productCate">
            <el-menu-item index="3-3"><i class="icon iconfont icon-fenlei"></i> 商品分类 </el-menu-item>
          </router-link>
          <router-link to="/pms/productAttr">
            <el-menu-item index="3-4"><i class="icon iconfont icon-haofangtuo400iconfontzhuzhaileixing"></i> 商品类型 </el-menu-item>
          </router-link>
          <router-link to="/pms/brand">
            <el-menu-item index="3-5"><i class="icon iconfont icon-pinpaitemai"></i> 商品品牌 </el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "sidebar",
	computed: {
    ...mapGetters(["sidebar"]),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("/app.d8d41069.css");

.sidebar {
  position: fixed;
  height: 100%;
  background: #545c64;
  li {
    text-align: left;
  }
}

.sidebar-w1{
	width: 64px;
}

.sidebar-w{
  width: 200px;
}

// a {
//   text-decoration: none;
//   /* 去除默认的下划线 */
//   outline: none;
//   /* 去除旧版浏览器的点击后的外虚线框 */
// 	color: white;
// }
</style>